﻿@page "/docs/components/step"

<Seo Canonical="/docs/components/step" Title="Blazorise Step component" Description="The Step component displays progress through numbered steps." />

<DocsPageTitle>
    Step component
</DocsPageTitle>

<DocsPageParagraph>
    The <Code Tag>Step</Code> component displays progress through numbered steps.
</DocsPageParagraph>

<DocsPageParagraph>
    Similar to <Code Tag>Tabs</Code> component, the step component have the same structure and usage.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Code Tag>Steps</Code> container for Step or StepPanel items
        <UnorderedList>
            <UnorderedListItem>
                <Code Tag>Items</Code> container for Step items
                <UnorderedList>
                    <li>
                        <Code Tag>Step</Code> clickable step items
                    </li>
                </UnorderedList>
            </UnorderedListItem>
            <UnorderedListItem>
                <Code Tag>Content</Code> container for step panels
                <UnorderedList>
                    <UnorderedListItem>
                        <Code Tag>StepPanel</Code> container for step content
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageParagraph>
    The <Code>Steps</Code> component is container for <Code>Step</Code> items. The <Code>Name</Code> of each step
    item should match the <Code>Name</Code> of a step panel(if panels are used).
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Code Tag>StepsContent</Code> container for step panels
        <UnorderedList>
            <UnorderedListItem>
                <Code Tag>StepPanel</Code> container for step content
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageParagraph>
    The step content container is used to hold step panels. Each content pane also has a unique <Code>Name</Code>,
    which is targeted by a link in the step-strip.
</DocsPageParagraph>

<DocsPageParagraph>
    Most of the time you will only need to use <Code>Steps</Code> component as it is crafted to hold both clickable
    step items and step content. Only in the advanced scenario where the content will be separated from the step items
    you will need to use <Code>StepsContent</Code> component.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicStepExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicStepExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Functions
</DocsPageSubtitle>

<Table>
    <TableHeader ThemeContrast="ThemeContrast.Light">
        <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Description</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowCell><Code>SelectStep(string name)</Code></TableRowCell>
            <TableRowCell>Sets the active step by the name.</TableRowCell>
        </TableRow>
    </TableBody>
</Table>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes Title="Steps">
    <DocsAttributesItem Name="SelectedStep" Type="string" Default="null">
        Currently selected step name.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedStepChanged" Type="EventCallback<string>">
        Occurs after the selected step has changed.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="Step">
    <DocsAttributesItem Name="Name" Type="string" Default="null">
        Defines the unique step name.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Index" Type="int?" Default="null">
        Used to override item index.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Completed" Type="bool" Default="false">
        Marks the step as completed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Color" Type="Color" Default="None">
        Overrides the step color.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Clicked" Type="EventCallback">
        Occurs when the button is clicked.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Marker" Type="RenderFragment">
        Custom render template for the marker(circle) part of the step item.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Caption" Type="RenderFragment">
        Custom render template for the text part of the step item.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="StepsContent">
    <DocsAttributesItem Name="SelectedPanel" Type="string" Default="null">
        Currently selected panel name.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedPanelChanged" Type="EventCallback<string>">
        Occurs after the selected panel has changed.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="StepPanel">
    <DocsAttributesItem Name="Name" Type="string" Default="null">
        Defines the panel name that must match the corresponding step name.
    </DocsAttributesItem>
</DocsAttributes>